<template>
	<view class="content">
		<view class="border"></view>
		<view class="table">
			<span>甲方签名</span>
			<input v-if="firstSignUrl === null" type="text" value="" placeholder="点击书写签名" disabled @click="setSignature(1)"/>
			<image v-else width="260rpx" height="100rpx" :src="firstSignUrl"></image>
		</view>
		<view class="table">
			<span>日期</span>
			<input type="text" :value="firstSignTime" disabled placeholder="签名时间" />
		</view>
		<view class="border"></view>
		<view class="table">
			<span>乙方签名</span>
			<input v-if="secondSignUrl === null" type="text" value="" placeholder="点击书写签名" disabled @click="setSignature(0)"/>
			<image v-else width="260rpx" height="100rpx" :src="secondSignUrl"></image>
		</view>
		<view class="table">
			<span>日期</span>
			<input type="text" :value="secondSignTime" disabled placeholder="签名时间" />
		</view>
		<view class="border"></view>
		<view class="button">
			<u-button class="styleCss1" hover-class="none" @click="upClick()">上一页</u-button>
			<u-button type="primary" class="styleCss2"  hover-class="none" @click="submit()">签署完成</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			agreeInfo: {},
			firstSignUrl: '',
			firstSignTime: '',
			secondSignUrl: '',
			secondSignTime: '',
			writer: '', // 甲方为1， 乙方为0
			agreemnetId: ''
		}
	},
	methods: {
		setSignature (e) {
			if (this.writer === e) {
				uni.navigateTo({
				    url: '../signature/signature'
				});
			}
		},
		upClick () {
			uni.navigateTo({
			    url: '../agreement/petAgreementTwo'
			});
		},
		submit () {
			if (this.writer === 1) {
				if (this.firstSignTime === null) {
					uni.showToast({
						title: '日期不能为空',
						icon: 'none'
					})
					return false
				}
				if (this.firstSignUrl === null) {
					uni.showToast({
						title: '请签名',
						icon: 'none'
					})
					return false
				}
				this.setAgreeMent()
			} else {
				if (this.secondSignTime === null) {
					uni.showToast({
						title: '日期不能为空',
						icon: 'none'
					})
					return false
				}
				if (this.secondSignUrl === null) {
					uni.showToast({
						title: '请签名',
						icon: 'none'
					})
					return false
				}
				this.setAgreeMent()
			}
		},
		setAgreeMent () {
			uni.showLoading({
			    title: '正在加载中',
				mask: true
			});
			this.$request(this.commonApi.setAgree, 'POST', {
				agreementId: this.agreemnetId,
				firstAddress: this.agreeInfo.firstAddress,
				firstIdCard: this.agreeInfo.firstIdCard,
				firstIdCardUrl: this.agreeInfo.firstIdCardUrl,
				firstName: this.agreeInfo.firstName,
				firstPhone: this.agreeInfo.firstPhone,
				firstSignTime: this.agreeInfo.firstSignTime,
				firstSignUrl: this.agreeInfo.firstSignUrl,
				secondAddress: this.agreeInfo.secondAddress,
				secondIdCard: this.agreeInfo.secondIdCard,
				secondIdCardUrl: this.agreeInfo.secondIdCardUrl,
				secondName: this.agreeInfo.secondName,
				secondPhone: this.agreeInfo.secondPhone,
				secondSignTime: this.agreeInfo.secondSignTime,
				secondSignUrl: this.agreeInfo.secondSignUrl
			}, 'application/json').then(res => {
				let items = res.data
				if (items.data.jump === 1) {
					uni.reLaunch({
					    url: '../adoptCode/adoptCode?gain=' + true + '&code=' + items.data.code
					});
				} else if (items.data.jump === 2) {
					uni.reLaunch({
					    url: '../adoptCode/adoptCode?agreementId=' + this.agreemnetId
					});
				}
				uni.hideLoading();
			})
		}
	},
	mounted () {
		this.agreeInfo = this.$store.getters.getAgreeInfo
		this.firstSignTime = this.agreeInfo.firstSignTime
		this.firstSignUrl = this.agreeInfo.firstSignUrl
		this.secondSignTime = this.agreeInfo.secondSignTime
		this.secondSignUrl = this.agreeInfo.secondSignUrl
		this.writer = this.agreeInfo.writer
		this.agreemnetId = uni.getStorageSync('agreementId');
		console.log(this.agreeInfo)
	}
};
</script>

<style lang="scss" scoped>
	.signature-title {
		width: 700rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		font-size: 28rpx;
		color: #313131;
	}
	.signature-top {
		width: 700rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 50rpx 0;
	}
	.signature-img {
		width: 92%;
		height: 360rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px dashed #f2f2f2;
		border-radius: 20rpx;
		image {
			width: 340rpx;
			height: 660rpx;
		}
	}
	.signature-data {
		width: 700rpx;
		height: 360rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.styleCsss{
		width: 660rpx;
	}
	.buttons /deep/ .u-btn--primary{
		background: #FFCC00;
	}
	.buttons{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: white;
		padding: 60rpx 0;
		z-index: 1;
	}
	
	
	.button /deep/ .u-btn--primary{
		background: #FFCC00;
	}
	.styleCss1{
		width: 300rpx;
		height: 60rpx;
	}
	.styleCss2{
		width: 300rpx;
		height: 60rpx;
	}
	.button{
		width: 100%;
		height: 100rpx;
		padding-bottom: 60rpx;
		background: white;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: row;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
	.border{
		width: 100%;
		height: 10rpx;
		background: #F6F6F6;
	}
	.table{
		width: 700rpx;
		height: 120rpx;
		min-height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		border-bottom: 1px solid #f6f6f6;
		font-size: 28rpx;
		color: #333333;
		input{
			text-align: right;
		}
		image {
			width: 100rpx;
			height: 150rpx;
			transform: rotate(-90deg);
			margin-right: 30rpx;
		}
	}
.content {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}
</style>
